<template>
  <div class="home"> 
    <!-- <keep-alive> -->
      <header-nav ></header-nav>
    <!-- </keep-alive> -->
    <transition name="fade" mode="out-in">
      <keep-alive>
        <router-view ></router-view> 
      </keep-alive>
    </transition>
    <div class="height50"></div>
    <keep-alive>
      <tabbar></tabbar> 
    </keep-alive>
  </div>
</template>

<script>
import tabbar from '@/components/tabbar'
import api from '@/api/api.js'
import headerNav from '@/components/headerNav'
// Vue.component("headerNav", headerNav);//全局自定义组件
export default {
  name: 'home',
  components: { 
    tabbar,
    headerNav
  },
  data () {
    return {
      options:{},
      showFilter:false, //侧边筛选显示
    }
  },
  activated(){ 
    if(localStorage.hj_userInfo && JSON.parse(localStorage.hj_userInfo).jwt){ 
      this.getCityList(); 
    }
  },
  mounted () {  
    if(localStorage.hj_userInfo && JSON.parse(localStorage.hj_userInfo).jwt){ 
      this.getCityList(); 
    }
    
  },
  filters: {
     
  },
  
  methods: { 
    getCityList(){
      // if(sessionStorage.cityList){
      //   return
      // }
      api.publick.cityList({},res=>{
        let cityArr = res.result.map(item=>{
          return {name: item.city,value:item.city}
        })
        sessionStorage.cityList = JSON.stringify(cityArr); 
      })
    },
    
  }
}
</script> 
<style lang="less" scoped>  
  .height50{
    height: 50px;
  }
  .header-img{
    width: 100px;
    height: 30px;
    display: block;
  }
  .header-icon{
    width:14px;
    height: 16px;
    margin-right: 9px;
    display: block;
  }

  .nav-header{
    width: 7.5rem;
    height: 40px;
    padding: 0 30px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .location-box{
      display: flex;
      align-items: center;
      font-weight: bold; 
      min-width:50px ;
    }
    .message-help-box{
      display: flex;
      .message-fox{
        position: relative;
        .message-tips{
          position: absolute;
          width: 8px;
          height: 8px;
          top: -1px;
          right: -1px;
          border-radius: 50%;
          background: #FABE00;
        }
        img{
          width: 17px;
          height: 17px;
        }
      }
      &>img{
        margin-left: 12px;
        width: 17px;
        height: 17px;
      }
    }
  }
</style>